<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #screen{
            width: 800px;
            height: 400px;
            background: #0000ff;
        }
    </style>
</head>
<body>
<div id="screen"></div>
<input id="message" placeholder="发送弹幕">
<button id="btn">发送</button>
<script src="jquery-1.11.0.min.js"></script>
<script>
    var websocket = null;
    //浏览器是否支持WebSocket
    if('WebSocket' in window){
        //指定弹幕服务器的ip和端口
        websocket = new WebSocket('ws://127.0.0.1:8888/ws');
    }else{
        alert('浏览器不支持WebSocket');
    }
    //设置点击事件
    $("#btn").click(function () {
        //发送消息给服务器
        websocket.send($("#message").val());
        $("#message").val("");
    });
    //接收服务器端消息
    websocket.onmessage = function () {
        let msg = event.data;
        console.log(msg);
        showMessage(msg);
    };
    //显示文字到弹幕上
    function showMessage(text) {
        $("#screen").append("<div style='color: azure'>" + text + "</div>")
    }
</script>
</body>
</html>